import React, {
  Component
} from 'react';
import { Form, Icon, Input, Button, Select, notification, message } from 'antd';
const FormItem = Form.Item;
import './index.less';
import { connect } from 'react-redux';
import store from '../../../redux/index';
import axios from 'axios';

const Option = Select.Option;

class GroupFrom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      intData: []
    };
  }
    // 提示框
    openNotification = (type, Message, Description) => {
      notification[type]({
        message: Message,
        description: Description
      });
    };


  // 保存菜单
    handleSubmitSave = (e) => {
      const _this = this;
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        if (!err) {
          values.groupType = 1;
          values.parentId = _this.props.oData.parentID != '' ? _this.props.oData.Num : '-1';
          const Token = sessionStorage.getItem('token');
          axios.post('/api/admin/group/', values, {
            headers: {
              'Content-Type': 'application/json',
              Authorization: Token
            }
          })
            .then(function(response) {
              if (response.data.status == 200) {
                _this.openNotification('success', '成功', '创建成功');
              }
              _this.props.updataMenu('SaveOk');
            })
            .catch(function(error) {
              console.log(error);
              message.error('服务器开小差啦，请重试！');
            });
        }
      });
      this.clearValue(this.props.ID);
      this.props.form.resetFields();

    }

    clearValue(ID) {
      // console.log("clear---"+ID);
      var storeData = store.getState().getGroup.GroupData;
      if (ID) {
        storeData = {
          code: '',
          description: '',
          groupType: '',
          id: '',
          name: '',
          parentId: ID,
          path: '',
        };
      } else {
        storeData = {
          code: '',
          description: '',
          groupType: '',
          id: '',
          name: '',
          parentId: -1,
          path: '',
        };
      }
      store.dispatch({ type: 'GroupData', GroupData: storeData });
    }

    // 菜单更新
    handleSubmitUpate = (e) => {
      const _this = this;
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        values.id = _this.props.oData.Num;
        values.groupType = 1;
        values.parentId = _this.props.oData.parentID;
        if (!err) {
          // console.log('Received values of form: ', values);
          const Token = sessionStorage.getItem('token');
          axios.put('/api/admin/group/' + this.props.ID, values, {
            headers: {
              'Content-Type': 'application/json',
              Authorization: Token
            }
          })
            .then(function(response) {
              if (response.data.status == 200) {
                _this.openNotification('success', '成功', '更新成功');
              }
              // console.log('菜单更新--------');
              _this.props.updataMenu('UpDateOk');
            })
            .catch(function(error) {
              console.log(error);
              message.error('服务器开小差啦，请重试！');
            });
        }
      });
      this.clearValue(this.props.ID);
      this.props.form.resetFields();
    }

    render() {
      const {
        getFieldDecorator
      } = this.props.form;
      const FromData = this.state.intData;
      const parentIdOff = this.props.oData.parentIdOff;
      const parentIdValue = this.props.oData.parentID;

      const formItemLayout = {
        labelCol: {
          xs: {
            span: 2
          },
          sm: {
            span: 2
          },
        },
        wrapperCol: {
          xs: {
            span: 22
          },
          sm: {
            span: 22
          },
        },
      };

      return (
        <div className="MenuManager">
          <Form className="MenuManagerForm">
            <FormItem
              label="名称"
              {...formItemLayout}
            >
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入名称' }],
                initialValue: store.getState()['getGroup'].GroupData.name
              })(
                <Input type="text" placeholder="请输入名称" disabled={store.getState()['getGroup'].GroupBtnsStatus} />
              )}
            </FormItem>
            <FormItem
              label="编码"
              {...formItemLayout}
            >
              {getFieldDecorator('code', {
                rules: [{ required: true, message: '请输入编码' }],
                initialValue: store.getState()['getGroup'].GroupData.code

              })(
                <Input type="text" placeholder="请输入编码" disabled={store.getState()['getGroup'].GroupBtnsStatus} />
              )}
            </FormItem>

            <FormItem
              label="描述"
              {...formItemLayout}
            >
              {getFieldDecorator('description', {
                rules: [{ required: false, message: '请输入描述' }],
                initialValue: store.getState()['getGroup'].GroupData.description
              })(
                <Input placeholder="请输入描述" disabled={store.getState()['getGroup'].GroupBtnsStatus} />
              )}
            </FormItem>
            {store.getState()['getGroup'].GroupBtnsShowStatus ? null
              : <div className="Btns">
                <Button type="primary" htmlType="submit" onClick={this.handleSubmitSave}>保存</Button>
                <Button>取消</Button>
              </div>
            }

            {store.getState()['getGroup'].GroupBtnsUpate ?
              <div className="Btns">
                <Button type="primary" htmlType="submit" onClick={this.handleSubmitUpate}>更新</Button>
                <Button>取消</Button>
              </div>
              : null
            }

          </Form>
        </div>
      );
    }
}
const GroupFromCt = Form.create()(GroupFrom);
export default connect((state) => {
  return { ...state };
})(GroupFromCt);